import { useEffect } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";

export default function MapContainer() {
  let map = null;

  useEffect(() => {
    window._AMapSecurityConfig = {
      securityJsCode: "182e4aa1c819f46f15e39396bee911a7",
    };
    AMapLoader.load({
      key: "c5146a16e963fce1c09ee1979a0dd3e2", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
        });
        var position = [
          [116.556, 39.993253],
          [116.473195, 59.993253],
          [116.453195, 39.993253],
          [116.493195, 39.973253],
          [116.473195, 39.973253],
          [116.453195, 39.973253],
          [116.493195, 39.953253],
          [116.473195, 39.953253],
          [116.453195, 39.953253]
        ];
        var content = [
          'bottom-left',
          'bottom-center',
          'bottom-right',
          'middle-left',
          'center',
          'middle-right',
          'top-left',
          'top-center',
          'top-right'
        ]
        for (var i = 0; i < position.length; i++) {
          const marker = new AMap.Marker({
            position: position[i],
            label: {
              content: '北京', //将 html 传给 content
              offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
            }
          });
          map.add(marker);
        }
      })

      .catch((e) => {
        console.log(e);
      });

    return () => {
      map?.destroy();
    };
  }, []);

  return (
    <div
      id="container"

      style={{ height: "400px" }}
    ></div>
  );
}

